define(['jquery', 'knockout', 'eventbus', 'dataservice', 'util'], function ($, ko, eventbus, ds, util) {
	return function () {
		// Observe the marked question list.
		let markedQuestions = ko.observable({});

		// Retrieve minified marked questions, for the list view.
		let retrieveMarkedQuestions = function (data) {
			// Update the list of marked questions with minified questions.
			markedQuestions(data.questions.map(
				function (markedQuestion) {
					return util.minifyQuestion(markedQuestion);
				}
			));

			// Add pagination data then notify the components when it is ready.
			let paginationData = {
				currentUrl: data.currentPageUrl,
				firstUrl: data.firstPageUrl,
				prevUrl: data.previousPageUrl,
				nextUrl: data.nextPageUrl,
				lastUrl: data.lastPageUrl
			}
			eventbus.publish("markedQuestionsLoaded", paginationData);
		}

		// Initialize the first page with marked questions.
		ds.getMarkedQuestions(retrieveMarkedQuestions);

		// Wrapper for the dataservice function with the given url.
		let getMarkedQuestions = function (url) {
			ds.getMarkedQuestions(retrieveMarkedQuestions, url);
		}

		// Navigate to details and notify other compoents.
		let navigateToDetails = function (question) {
			localStorage.setItem("selectedQuestionUrl", question.questionUrl);
			eventbus.publish("changeComponentEvent", "question-details");
		}

		// Expose the properties needed in the UI.
		return {
			title: 'Saved Questions',
			markedQuestions,
			getMarkedQuestions,
			navigateToDetails
		}
	}
});